<template>
	<view>
		<view class="dd-head">
			<view :class="asitemindex==item.status?'dd-sitem':'dd-item'" v-for="(item,index) in answer" :key="index" @tap="asitembtn(item)" >
				<text>{{item.name}}</text>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" height="0" style="min-height: 0;">
			<view class="transaction_detail_list">
				<view class="transaction_detail_item" v-for="(item,index) in asitemindex==2?list:listA" :key="index">
					<view class="tdi_topup" :class="[list.length==(index+1)&&'tdi_topup_extra']" v-if="asitemindex==1">
						<view class="tdi_topup_left">
							<view class="tdi_topup_left_description">{{item.type == '1' ? '充值入账' : '券包赠送'}}</view>
							<view class="tdi_topup_left_time">{{item.createTime}}</view>
						</view>
						<view class="tdi_topup_right" v-if="item.money">
							+{{item.money}}元
						</view>
					</view>
					<view class="tdi_expense" :class="[list.length==(index+1)&&'tdi_topup_extra']" v-if="asitemindex==2">
						<view class="tdi_expense_top">
							<text class="tdi_expense_top_effect">{{item.title}}</text>
							<text class="tdi_expense_top_money">{{item.type==3?'+':'-'}}{{item.payType==0?item.money:item.originalMoney}}元</text>
						</view>
						<view class="tdi_expense_middle">
							<text class="tdi_expense_middle_ordernumber">订单编号：{{item.orderNo}}</text>
							<text v-if="item.isBack==1&&item.type!=3" class="tdi_expense_middle_refund">已退款{{item.payType==0?item.money:item.originalMoney}}</text>
						</view>
						<view class="tdi_expense_bottom">
							<text class="tdi_expense_bottom_time">{{item.createTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				asitemindex:1,
				answer:[
					{
						name:'充值记录',
						status:1
					},
					{
						name:'消费记录',
						status:2
					}
				],
				// 下拉刷新的组件 参数 可以 改变的
				downOption: {
					use: false,
					auto: true //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					auto: true, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '暂无明细', // 提示
						icon: '/static/my/transaction_empty.png'
					},
					textNoMore: '—— 没有更多记录了 ——'
				},
				list:[
				],
				listA:[]
			}
		},
		onShow() {
			this.upCallback({num:0,size:99999999});
		},
		methods: {
			asitembtn(item){
				this.asitemindex=item.status
				this.list=[]
				// this.mescroll.resetUpScroll()
				this.upCallback({num:0,size:99999999});
			},
			//下拉刷新 不需要开启
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			// 上拉加载
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size;
				// 充值记录
				if(this.asitemindex==1){
					let self = this;
					uni.showLoading({
						title: '加载中'
					});
					self._postBody('user/user/rechargeRecord', {
						pageIndex: page.num,
						pageSize: page.size,
								
					}, function(res) {
						console.log(res);
						const { data } = res;
						let curPageLen = data.records.length;
						let totalPage = Number(data.total) / page.pageSize;
						if (page.num == 1) self.listA = [];
						data.records.map(item => {
							item.isImage = false
							return item
						})
						self.listA = data.records;
						self.mescroll.endByPage(curPageLen, totalPage)
					});
				}
				if(this.asitemindex==2){
					
					let self = this;
					uni.showLoading({
						title: '加载中'
					});
					self._postBody('user/user/consumeRecord', {
						pageIndex: page.num,
						pageSize: page.size,
								
					}, function(res) {
						console.log(res,'2345676543');
						const { data } = res;
						
						let curPageLen = data.records.length;
						let totalPage = Number(data.total) / page.pageSize;
						if (page.num == 1) self.list = [];
						data.records.map(item => {
							item.isImage = false
							return item
						})
						self.list = self.list.concat(data.records);
						self.mescroll.endByPage(curPageLen, totalPage)
					});
					
				}
			}
		}
	}
</script>
<style scoped>
	/deep/.empty-icon{
		margin: 0 auto;
	}
</style>
<style lang="less" scoped>
	.dd-head{
		display: flex;
		justify-content: space-between;
		padding: 0rpx 140rpx;
		line-height: 84rpx;
		border-bottom: 1px solid rgba(238,238,238,1);
		z-index: 99;
		position: sticky;
		top: var(--window-top);
		position: -webkit-sticky;
		background: #FFFFFF;
	}
	.dd-sitem{
		font-size:34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight:500;
		line-height: 84rpx;
		color:#077840;
		border-bottom: 4rpx solid #077840;
	}
	.dd-item{
		font-size: 34rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 84rpx;
	}
	.transaction_detail_list{
		padding:0 30rpx;
		margin-top: 36rpx;
		.transaction_detail_item{
			.tdi_topup{
				height: 140rpx;
				border-bottom: 2rpx solid #EEEEEE;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;
				&_left{
					display: flex;
					flex-direction: column;
					justify-content: center;
					&_description{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}
					&_time{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						margin-top: 20rpx;
					}
				}
				&_right{
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF5100;
					line-height: 40rpx;
				}
			}
			.tdi_expense{
				border-bottom: 2rpx solid #EEEEEE;
				box-sizing: border-box;
				padding: 18rpx 0 20rpx;
				&_top{
					display: flex;
					justify-content: space-between;
					&_effect{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 40rpx;
					}
					&_moeny{
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 40rpx;
					}
				}
				&_middle{
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0;
					&_ordernumber{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
					}
					&_refund{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF5100;
						line-height: 40rpx;
					}
				}
				&_bottom{
					&_time{
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
					}
				}
			}
			.tdi_topup_extra{
				border-bottom: none;
			}
		}
	}
</style>
